import React from 'react';
import { Form, Switch, Card, Typography } from 'antd';
import { MailOutlined, BellOutlined, AppstoreOutlined } from '@ant-design/icons';

const { Text } = Typography;

interface NotificationFormValues {
  emailNotifications: boolean;
  systemMessages: boolean;
  appNotifications: boolean;
}

const NotificationForm: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: NotificationFormValues) => {
  };

  return (
    <div style={{ maxWidth: 800 }}>
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
      >
        <Card title="邮件通知" style={{ marginBottom: 24 }}>
          <Form.Item
            label={
              <span>
                <MailOutlined style={{ marginRight: 8 }} />
                系统通知邮件
              </span>
            }
            name="emailNotifications"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          <Text type="secondary">
            接收系统更新、安全提醒等重要通知邮件
          </Text>
        </Card>

        <Card title="系统消息" style={{ marginBottom: 24 }}>
          <Form.Item
            label={
              <span>
                <BellOutlined style={{ marginRight: 8 }} />
                系统消息提醒
              </span>
            }
            name="systemMessages"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          <Text type="secondary">
            接收系统消息、任务提醒等通知
          </Text>
        </Card>

        <Card title="应用通知">
          <Form.Item
            label={
              <span>
                <AppstoreOutlined style={{ marginRight: 8 }} />
                应用内通知
              </span>
            }
            name="appNotifications"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          <Text type="secondary">
            接收应用内的消息推送和提醒
          </Text>
        </Card>
      </Form>
    </div>
  );
};

export default NotificationForm; 